// 用户中心配置

import draggable from 'vuedraggable'
import { saveMicroPage,viewPageByCategory } from '@/api/shoppingMall/feature'

export default {
  name: 'MallPersonCenter',
  components: {
    draggable,
    iconFont:()=>import('@/components/icon-font'),
    chooseImages: () => import('@/components/new-choose-images/index.vue'),
    chooseFeature: () => import('@/components/choose-feature/index.vue')
  },
  data() {
    return {
      isDialogIcon: false,
      isICon: true,
      iconUrl:'',
      isGetChooseData: false, // 是否可以返回微页面
      dialogChoosePages: false, // 自定义页面弹窗
      index1:0,
      index2:0,
      canChooseImagesNum: 1, // 可以添加的图片数量
      isSaving: false, // 是否正在保存
      dialogVisible: false,
      // head的颜色列表
      headColorList: ['#b2b2b2', '#e36657', '#654b65', '#a3c87b', '#77b1f2', '#464545', '#f1aab5'],
      showOrHider: [{ key: 1, title: '显示' }, { key: 2, title: '隐藏' }],
      isShowHeadPop: false,
      currentPanel: '1',
      moduleList: [
        {
          type: "config",
          dataField: {
            isShow: true,
            disabled: true,
            key: 'topNavBar',
            moduleName: '页面设置',
            category:11,
            title: '个人中心',
            desc: '',
            backColor: '#FFFFFF',
            colorSetting: 1,
            contentColor: '#000000',
            globalBackColor: '#FFFFFF',
            globalContentColor: '#000000',
            style: '1'
          }
        },
        {
          type: 'head',
          dataField: {
            isShow: true,
            disabled: true,
            key: 'head',
            moduleName: '用户头像',
            style: '1', //头部样式
            boxBackgroundStyle: '1',// 盒子背景的类型 1图片 2纯色
            boxBackgroundColor: '#fff',// 盒子背景纯色
            // boxBackgroundImage: '../../../../assets/member/member-head_bg.jpg',// 盒子背景图片
            boxBackgroundImage: require('../../../../assets/member/member-head_bg.jpg'),// 盒子背景图片
            // styleImage: '../../../../assets/member/member-head_bg.png', // 自定义风格的图片地址、
            styleImage: '../../../../assets/member/member-head_bg.png', // 自定义风格的图片地址、
            headerAlign: 'left', // 会员图像位置的对齐方式 left center right
            paddingTop: 10, // 10 20 30 小 中 大
            paddingBottom: 10,// 10 20 30 小 中 大
            levelBackgroundColor: '#534f4f', // 会员信息的背景颜色
            isShowLevel: 1,// 1显示 2不显示 等级
            isShowPhone: 1,// 1显示 2不显示 手机号
            isShowCode: 1,// 1显示 2不显示 二维码
            isShowCardNumber: 1,// 1显示 2不显示 卡号
            isShowSign: 1// 1显示 2不显示 签到
          }
        },
        {
          type: 'level',
          dataField: {
            isShow: true,
            key: 'level',
            moduleName: '等级信息',
            item: [
              { title: '普卡会员' },
              { title: '银卡会员' },
              { title: '金卡会员', desc: '日消费还需5000元<br>年消费还需19802元' },
              { title: '白金卡会员' }
            ],
            style: '1', //显示样式
            textColor: '#464646',// 等级文字颜色
            lineColor: '#d11577',// 等级进度条颜色
            isShowDesc: 1// 1显示 2不显示 升级额度提示
          }
        },
        {
          type: 'order',
          dataField: {
            isShow: true,
            disabled: true,
            key: 'order',
            moduleName: '订单信息',
            item: [
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan111',
                  appUrl:'t-icon-a-ziyuan111'
                },
                isShow: true,
                title: '待付款',
                url: {
                  style: '1',
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan10',
                  appUrl:'t-icon-a-ziyuan10'
                },
                isShow: true,
                title: '待发货',
                url: {
                  style: '1',
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan121',
                  appUrl:'t-icon-a-ziyuan121'
                },
                isShow: true,
                title: '待收货',
                url: {
                  style: '1',
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan141',
                  appUrl:'t-icon-a-ziyuan141'
                },
                isShow: true,
                title: '待评价',
                url: {
                  style: '1',
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan131',
                  appUrl:'t-icon-a-ziyuan131'
                },
                isShow: true,
                title: '退货/售后',
                url: {
                  style: '1',
                }
              }
            ]
          }
        },
        {
          type: 'asset',
          dataField: {
            isShow: true,
            key: 'asset',
            moduleName: '用户资产',
            item: [
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan16',
                  appUrl:'t-icon-a-ziyuan16'
                },
                isShow: true,
                title: '积分',
                url: {
                  style: '1'
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan19',
                  appUrl:'t-icon-a-ziyuan19'
                },
                isShow: true,
                title: '优惠券',
                url: {
                  style: '1'
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan20',
                  appUrl:'t-icon-a-ziyuan20'
                },
                isShow: true,
                title: '礼品卡',
                url: {
                  style: '1'
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan18',
                  appUrl:'t-icon-a-ziyuan18'
                },
                isShow: true,
                title: '碳分',
                url: {
                  style: '1'
                }
              }
            ]
          }
        },

        {
          type: 'imageMenu',
          dataField: {
            isShow: false,
            key: 'imageMenu',
            moduleName: '图片导航',
            item: [
              {
                title: '图片菜单',
                link: {},
                url: require('@/assets/commons/welcome.png')
              }
            ]
          }
        },
        {
          type: 'menu',
          dataField: {
            isShow: true,
            disabled: true,
            key: 'menu',
            moduleName: '菜单',
            style: '2', // 1列表 2宫格
            needGap: false,
            item: [
              {
                icon: {
                  type: 1,
                  url: '#icon-gouwuche-copy',
                  appUrl:'t-icon-gouwuche-copy'
                },
                isShow: true,
                title: '我的购物车',
                url: {
                  style: '1',
                  link:'/pages/main/cart/cart'
                }
              },
              {
                icon: {
                  type: 1,
                  url:'#icon-a-ziyuan3',
                  appUrl:'t-icon-a-ziyuan3'
                },
                isShow: true,
                title: '我的团购',
                url: {
                  style: '1',
                  link:''
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan2',
                  appUrl:'t-icon-a-ziyuan2'
                },
                isShow: true,
                title: '我的秒杀',
                url: {
                  style: '1',
                  link:''
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan7',
                  appUrl: 't-icon-a-ziyuan7',
                },
                isShow: true,
                title: '门店活动',
                url: {
                  style: '1',
                  link:''
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan8',
                  appUrl:'t-icon-a-ziyuan8'
                },
                isShow: true,
                title: '会员服务',
                url: {
                  style: '1',
                  link:'/pages/mallService/memberServices/index/index'
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan19-copy',
                  appUrl:'t-icon-a-ziyuan19-copy'
                },
                isShow: true,
                title: '领券中心',
                url: {
                  style: '1',
                  link:'/pages/mallService/coupon/getCouponCenter/getCouponCenter'
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan4',
                  appUrl:'t-icon-a-ziyuan4'
                },
                isShow: true,
                title: '店铺关注',
                url: {
                  style: '1',
                  link:''
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan3',
                  appUrl:'t-icon-a-ziyuan3'
                },
                isShow: true,
                title: '我的分享',
                url: {
                  style: '1',
                  link:''
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan1',
                  appUrl:'t-icon-a-ziyuan1'
                },
                isShow: true,
                title: '我的权益',
                url: {
                  style: '1',
                  link:'/pages/setting/member/member/member'
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-a-ziyuan5',
                  appUrl:'t-icon-a-ziyuan5'
                },
                isShow: true,
                title: '商品收藏',
                url: {
                  style: '1',
                  link:''
                }
              },
              {
                icon: {
                  type: 1,
                  url: '#icon-kefu-copy',
                  appUrl:'t-icon-kefu-copy'
                },
                isShow: true,
                title: '在线客服',
                openType:"contact",
                url: {
                  style: '1',
                  link:''
                }
              }
            ]
          }
        }
      ],
      addNewMenu: {
        icon: {
          style: '1',
          url: ''
        },
        isShow: true,
        title: '',
        url: {
          style: '1',
          h5: '',
          appId: '',
          pagePath: ''
        }
      },
      // 当前编辑
      currentItem: {
        info: {}
      },
      dialogEdit: false,
      id:'',
      isType:null,
      isIcon:false,
      isImg:false
    }
  },
  computed: {},
  mounted () {
    this.getInfo()
  },
  methods: {
    getInfo(){
      viewPageByCategory({ id: 11 }).then(res => {
        this.id = res.id
        if(res.moduleList.length > 0){
          this.moduleList = res.moduleList
        }

      })
    },
    imageClick(index1,index2){
      this.$delete(this.moduleList[index1].dataField.item, index2)
    },
    // 保存
    save(){
      this.isSaving = true
      const moduleList = {
        id: this.id,
        operType: 2,
        moduleList: this.moduleList
      }
      saveMicroPage(moduleList).then(res => {
        this.isSaving = false
        this.$message.success('发布成功')
        this.getInfo()
      })
    },
    addMenuClick(){
      this.isType = 1
      this.dialogVisible = true
      Object.keys(this.addNewMenu).forEach(key =>{
        if(typeof this.addNewMenu[key] == 'object'){
         Object.keys(this.addNewMenu.icon).forEach(key1 => {
           this.addNewMenu.icon[key1] = ''
         })
         Object.keys(this.addNewMenu.url).forEach(key1 => {
           this.addNewMenu.url[key1] = ''
         })
        }else{
          this.addNewMenu[key] = ""
        }
      })
      this.addNewMenu.icon.style = '1'
      this.addNewMenu.url.style = '1'
    },
    // 选择图标
    iconClick(){
      this.isDialogIcon = true
      this.isShowIcon()
    },
    // 确定 图标
    iconChooseModel(){
      switch(this.isType){
        case 1:
          this.addNewMenu.icon.url = this.iconUrl
          this.$set(this.addNewMenu.icon,'appUrl',this.iconUrl.replace('#icon', 't-icon'))
          break
        case 2:
          this.currentItem.info.icon.url = this.iconUrl
          this.$set(this.currentItem.info.icon,'appUrl',this.iconUrl.replace('#icon', 't-icon'))
          break
      }

      this.isDialogIcon = false
    },
    iconBox(val){
      this.iconUrl = val
    },
    isShowIcon(){
      this.isICon = false
      this.$nextTick(()=>{
        this.isICon = true
      })
    },
    // 背景图像
    choiceClick(index){
      this.index1 = index
      this.index2 = ''
      this.$refs.pics.dialog = true
    },
    // 图片导航
    changeImg(index1,index2) {
      this.index1 = index1
      this.index2 = index2
      this.$refs.pics.dialog = true
      this.isImg = true
    },
    ImgClick(){
      this.$refs.pics.dialog = true
      this.isImg = false
    },
    getPicsUrl(arr) {
      if(this.index2 === ''){
        this.moduleList[this.index1].dataField.boxBackgroundImage = arr[0]
      }else{
        if(this.isImg){
          this.moduleList[this.index1].dataField.item[this.index2].url = arr[0]
        }else{
          console.log(this.currentItem)
          this.currentItem.info.icon.url = arr[0]
        }
      }
    },
    chooseImagesEnd($item) {
    },
    // 微页面
    choosePage(index1,index2,link) {
      this.index1 = index1
      this.index2 = index2
      this.dialogChoosePages = true
    },
    confirmClick() {
      let data = this.$refs.feature.currentchooseFeatures
      const microTitle = data.type === 0 && '系统页面' || data.type === 1 && '功能页面' || data.type === 2 && '商品详情' || data.type === 3 && '商品活动'
      let obj = {
        id: data.id,
        type: data.type,
        title: data.title,
        link: data.path,
        microTitle: microTitle,
      }
      if(this.index1 == ''){
        this.addNewMenu.url = {...this.addNewMenu.url,...obj}
      }else{
        this.$set(this.moduleList[this.index1].dataField.item[this.index2], 'link', obj)
      }
      this.dialogChoosePages = false
      this.$forceUpdate()
    },
    dragOnMove($data) {
      return $data.relatedContext.element.dataField.key !== 'topNavBar'
    },
    handlerClickModule(item) {
      if (this.currentPanel === item.dataField.key) {
        this.currentPanel = ''
        return
      }
      this.currentPanel = item.dataField.key
    },
    // push menu
    handlePushMenu() {
      this.$refs['addMenu'].validate((valid) => {
        if (valid) {
          let menuObj = this.moduleList.find(item => item.type === 'menu')
          menuObj.dataField.item.push(this.addNewMenu)
          this.dialogVisible = false
        } else {
          return false
        }
      })

    },
    handleTapHeadColor(item, colorItem, colorIndex) {
      item.colorIndex = colorIndex + 1
      item.systemColor = colorItem

      let pop = this.$refs.popHead
      if (pop && pop.length) {
        pop[0].doClose()
      }

      // console.log(this.$refs.popHead)
      // this.$refs.popHead.hide()
    },
    // 添加图片菜单
    handleAddImageMenu($list) {
      if ($list && $list.length >= 10) return
      $list.push({
        title: '图片菜单' + $list.length,
        link: {},
        url: require('@/assets/commons/welcome.png')
      })
    },
    // 用户资产 编辑
    assetEdit(meItem, meIndex, index){
      this.dialogEdit = true
      this.isIcon = true
      this.currentItem = {
        meIndex, index,
        info: JSON.parse(JSON.stringify(meItem))
      }
    },
    // 点击编辑
    handlerEdit(meItem, meIndex, index) {
      this.isIcon = false
      this.currentItem = {
        meIndex, index,
        info: JSON.parse(JSON.stringify(meItem))
      }
      this.dialogEdit = true
      this.isType = 2
    },
    // 修改名称、图标
    handlerSave() {
      let { currentItem } = this
      this.moduleList[currentItem.index].dataField.item[currentItem.meIndex] = currentItem.info
      this.dialogEdit = false
    }
  }
}
